﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>TweenMax demon</title>

<script src="minified/jquery-1.10.1.min.js"></script>
<script src="minified/TweenMax.min.js"></script>
<script src="minified/MorphSVGPlugin.min.js"></script>

<!--www.tweenmax.com.cn演示实例-->
<!-- Demo styles -->
<style>

svg {
  display: block;
 visibility:hidden;
  margin: auto;
  overflow: visible;
}
body {
  background: #1d1d1d;
}

#elephant, #buffalo{
  visibility:hidden;
}
</style>
</head>
<body>

<svg version="1.1"
	 id="svg2"  x="0px" y="0px" width="819.2px"
	 height="561.298px" viewBox="0 0 819.2 561.298" style="enable-background:new 0 0 819.2 561.298;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#ccc;}
</style>
<path id="hippo" class="st0" d="M13.833,231.876c4.154-55.746,24.442-104.83,60.85-147.292
	c41.031-47.948,92.453-71.909,154.224-71.909c23.493,0,58.398,3.714,104.745,11.058C380,31.148,414.891,34.778,438.411,34.778
	c35.955,0,87.816,13.426,155.586,40.18c12.009,4.566,26.513,17.056,43.554,37.315c9.683,11.967,24.669,30,44.943,53.975
	c4.608,3.246,10.62,8.068,18.005,14.56c7.374,6.408,12.435,9.201,15.171,8.28c0.935-2.792,3.261-6.677,6.947-11.738
	c1.842-1.858,2.978-2.78,3.431-2.78c1.418,0.922,2.779,1.844,4.168,2.78c1.375,0.935,1.829,3.672,1.375,8.28
	c-0.935,8.307-1.375,10.832-1.375,7.584c-0.496,4.637-1.148,7.6-2.083,9.032c-5.997,10.123-8.323,17.978-6.905,23.478
	c1.389,5.046,5.713,13.156,13.114,24.216c7.387,11.058,11.513,19.365,12.433,24.895c-0.453,4.141-0.652,10.803-0.652,20.048
	l-6.932,17.268c0,12.917,14.971,35.075,44.943,66.437c14.319,6.408,21.423,28.568,21.423,66.337
	c0,29.547-24.415,44.262-73.256,44.262c-6.465,0-13.37-0.197-20.756-0.708c-5.061-1.815-12.448-3.885-22.118-6.182
	c-11.511-1.417-19.365-5.302-23.491-11.796c-7.401-10.547-19.396-20.501-35.983-29.715c-2.766-1.333-6.806-6.408-12.108-15.199
	c-5.316-8.762-10.038-14.291-14.164-16.616c-4.126-2.269-10.136-2.751-17.992-1.333c-13.37,2.268-20.755,3.431-22.117,3.431
	c-3.246,0-7.967-0.907-14.178-2.779c-6.237-1.844-10.704-2.779-13.496-2.779c-3.206,14.773-3.929,29.063-2.07,42.873
	c0.453,3.715,2.779,6.72,6.918,8.988c6.479,4.622,9.911,7.146,10.393,7.657c4.125,3.204,8.521,8.506,13.114,15.851
	c0.935,2.806-0.794,7.514-5.189,14.177c-4.382,6.693-7.925,10.634-10.719,11.739c-2.751,1.192-8.749,1.787-17.978,1.787
	c-13.384,0-18.658,0.199-15.88,0.652c-18.43-2.779-28.808-4.367-31.134-4.792c-11.513-2.324-21.437-5.983-29.717-11.086
	c-4.183-2.751-8.974-15.681-14.503-38.734c-5.587-24.897-10.193-39.868-13.866-44.972c-0.907-1.36-2.056-2.012-3.431-2.012
	c-2.326,0-6.138,2.268-11.427,6.918c-5.302,4.537-8.889,7.06-10.704,7.6c-6.437,27.164-9.712,40.065-9.712,38.648
	c0,10.633,2.992,19.564,8.99,26.966c5.983,7.372,12.236,14.518,18.701,21.408c7.825,8.762,11.739,16.362,11.739,22.827
	c0,3.657-1.135,6.861-3.46,9.669c-9.683,11.966-25.832,17.978-48.417,17.978c-25.363,0-41.951-3.46-49.763-10.379
	c-10.165-8.762-16.616-18.005-19.367-27.617c-0.453-2.326-1.601-9.244-3.46-20.756c-0.922-6.947-3.005-11.058-6.195-12.42
	c-9.258-1.389-20.771-3.913-34.566-7.599c-2.793-1.844-5.784-6.465-9.017-13.837c-5.968-14.264-10.364-23.96-13.143-29.036
	c-13.852-6.919-35.968-14.717-66.408-23.451c-1.389,2.779-2.041,6.636-2.041,11.712c5.061,6.465,12.661,16.389,22.812,29.715
	c8.294,11.06,12.448,21.693,12.448,31.815c0,19.396-12.448,29.036-37.344,29.036c-18.898,0-31.8-1.333-38.732-4.112
	c-10.123-4.139-18.658-13.865-25.576-29.036c-11.527-25.406-17.978-39.696-19.367-42.9c-7.387-17.043-12.449-32.07-15.184-45
	c-1.871-9.188-4.65-23.294-8.323-42.193c-3.219-15.624-8.28-27.858-15.197-36.621C23.743,284.206,11.977,255.836,13.833,231.876z"/>
<path id="elephant" class="st0" d="M450.43,65.291c13.394,0,26.387,7.755,39.017,23.247c12.6,15.491,19.9,23.247,21.876,23.247
	h18.954c40.969,0,72.705,20.505,95.187,61.512c5.924,11.478,14.977,28.333,27.224,50.604c12.193,22.307,26.418,38.768,42.595,49.421
	c18.123,11.843,36.452,18.372,54.975,19.524c8.659,0.4,18.154-1.188,28.413-4.76c9.065-3.965,18.117-7.942,27.176-11.908
	l5.918,13.133c-29.165,22.386-56.959,33.931-83.383,34.731c-28.37,0.789-58.948-6.106-91.652-20.645
	c27.976,32.342,52.047,52.053,72.159,59.118l-4.73,4.766c-35.482-6.312-68.223-24.473-98.176-54.425l-23.659,14.14
	c0,1.588-1.473,3.256-4.432,5.02c-2.959,1.771-4.263,3.22-3.868,4.408c1.588,5.124,9.682,17.716,24.259,37.72
	c14.588,20.076,21.876,30.686,21.876,31.839c0,3.54-4.541,7.069-13.606,10.616c-9.059,3.535-13.976,7.471-14.764,11.799
	c-0.8,3.542,0.364,7.87,3.541,12.964c3.134,5.123,4.722,8.228,4.722,9.446c0,7.84-6.899,12.745-20.675,14.733
	c-2.395,0.364-9.896,0.582-22.494,0.582c-23.641,0-40.605-5.311-50.859-15.886c-8.27-9.021-14.8-25.52-19.53-49.452
	c-1.588-8.228-4.329-22.955-8.27-44.183c-40.206,10.247-81.612,15.377-124.212,15.377c-26.03,0-54.218-1.953-84.582-5.918
	c5.135,13.023,12.429,34.725,21.924,65.077c-19.718-2.77-43.394-6.706-70.976-11.835c-12.242,18.517-22.708,27.399-31.372,26.606
	c-15.377-1.159-37.471-8.846-66.242-23.028c-7.105-3.542-10.647-8.882-10.647-15.989c0-7.082,5.53-20.111,16.565-39.03
	c11.017-18.911,16.935-32.123,17.729-39.629c0.795-6.724-1.146-15.952-5.881-27.799c-5.918-15.383-9.277-25.405-10.066-30.171h2.377
	l-4.735-14.195c-18.153,19.712-34.718,34.112-49.7,43.176c-17.366,10.642-37.871,17.572-61.513,20.677
	c-4.729-4.693-7.869-7.064-9.458-7.064c29.17-12.635,57.978-32.529,86.347-59.753c1.195-1.188,8.665-6.487,22.496-15.989
	c7.864-5.117,12.593-11.186,14.187-18.292c9.841-39.417,29.952-67.254,60.312-83.425c24.835-13,59.747-19.493,104.681-19.493
	c20.506,0,40.037,1.371,58.554,4.116c8.67,2.377,22.488,5.161,41.406,8.295c1.588-15.692,7.112-29.625,16.57-41.794
	C422.642,72.367,435.454,65.291,450.43,65.291z"/>
  <path id="buffalo" class="st0" d="M526.991,49.247c17.28,0,39.159,1.076,65.703,3.161c37.488,2.966,61.505,9.949,72.025,20.933
	c5.478,5.518,12.228,16.322,20.221,32.36c8.019,17.345,14.755,29.185,20.234,35.506c4.624-5.894,8.394-9.909,11.373-11.982
	c8.848-6.761,15.35-11.192,19.547-13.265c0,10.946,0.752,17.152,2.242,18.628c1.45,1.451,7.487,2.617,18.006,3.459
	c34.51,2.124,51.803,33.278,51.803,93.515c0,11.373-0.622,24.223-1.891,38.551c-3.355,37.878-12.242,64.253-26.53,78.994
	c-2.552,2.487-9.392,5.116-20.571,7.863c-11.128,2.733-18.201,7.046-21.128,12.94c-3.822,7.178-7.59,21.063-11.36,41.738
	c-3.835,23.59-6.996,38.707-9.495,45.456l-9.496-12.604c-10.933-21.517-19.158-37.489-24.638-48.047
	c-11.387-20.221-22.747-30.74-34.12-31.594c-7.993-0.842-20.416,2.124-37.244,8.834c-12.668,5.493-25.079,10.96-37.294,16.426
	l-32.85,8.886c-11.375,4.612-19.16,13.019-23.382,25.247c-1.671,15.156-1.258,26.75,1.27,34.743
	c1.243,3.782,5.79,8.563,13.575,14.223c7.798,5.675,11.71,10.221,11.71,13.577c0,7.603-5.673,13.926-17.06,18.938
	c-9.301,4.235-18.369,6.322-27.177,6.322c-14.315-3.77-24.64-7.565-30.987-11.335c-5.039-1.698-7.538-7.605-7.538-17.695
	c0-4.637,0.375-11.373,1.23-20.248c0.842-8.796,1.269-15.584,1.269-20.221c0-5.466-0.427-10.182-1.269-14.184
	c-0.854-4.003-5.363-6.866-13.562-8.562c-8.214-1.658-12.98-3.536-14.211-5.661c-7.164-12.216-9.703-32.657-7.578-61.285h-79.603
	c-26.154-0.454-51.829-9.47-77.076-27.177c-2.979,4.637-8.874,9.145-17.695,13.614c-8.874,4.392-13.692,7.682-14.548,9.755
	c-0.856,4.21-4.21,10.454-10.104,18.628c-5.895,8.264-9.055,14.896-9.483,19.897c-3.355,33.318,19.82,71.416,69.524,114.37
	c-16.853,6.749-32.889,10.105-48.046,10.105c-3.77,0-7.605-0.195-11.373-0.609c0-3.368,0.22-9.872,0.647-19.6
	c0.427-7.979,0-13.874-1.269-17.656c-3.783-11.413-11.789-25.714-24.017-43.008c-13.459-18.913-22.099-32.812-25.881-41.673
	l6.943-45.508l-15.156,14.509c-8.433,13.886-17.087,27.748-25.908,41.633c-8.446,15.972-13.265,31.324-14.548,46.013
	c-1.683,22.281,12.009,46.039,41.077,71.247c-1.697-0.415-4.612,0.117-8.834,1.593c-4.21,1.464-6.322,2.811-6.322,4.08
	c-22.306-3.782-35.584-7.798-39.795-11.995c-5.48-7.538-9.068-18.693-10.751-33.421c-0.44-12.19-0.856-24.405-1.269-36.634
	c-0.44-5.466-1.244-15.727-2.527-30.935c-1.269-13.42-1.878-23.938-1.878-31.529c0-7.565,5.234-17.981,15.779-31.246
	c10.519-13.265,16.646-22.591,18.356-28.071c1.231-5.48-1.076-19.133-6.983-41.026c-7.19-25.649-10.726-43.343-10.726-52.981
	c0-5.907,0.816-10.726,2.487-14.534c-5.453,39.6-12.825,65.897-22.073,78.967C74,321.722,51.072,337.682,27.885,337.682
	c-6.749,0-11.607-2.073-14.534-6.322c-3.343-5.001-3.044-10.959,0.958-17.695c3.977-6.762,15.779-12.773,35.378-18.019
	c19.587-5.271,31.479-10.634,35.701-16.114c5.895-8.019,11.375-26.802,16.413-56.299c4.651-25.766,12.424-42.606,23.382-50.624
	c38.332-27.009,78.54-46.712,120.642-59.16c42.113-12.449,73.734-21.634,94.796-27.489
	C410.948,61.501,473.076,49.247,526.991,49.247z"/>
</svg>

<script>

var hippo = $("#hippo").attr("d");

TweenLite.set("svg", {visibility:"visible"})

var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, delay:1});
tl.to("#hippo", 1, {morphSVG:"#buffalo" , ease:Back.easeInOut})
  .to("#hippo", 1, {morphSVG:"#elephant", ease:Back.easeOut}, "+=0.5")
  .to("#hippo", 1, {morphSVG:hippo,  ease:Back.easeOut}, "+=0.5")

        </script>
</body>
</html>